iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 13
1
Modern Web

從0.5開始的JavaScript系列 第 13

Day13 工具包: 字串

  • 分享至 

  • xImage
  •  

先預告一下,枯燥但實用的工具包系列到今天為止,明天會開始聊聊它與 HTML/CSS 的實際應用。

從0.5開始的JavaScript 這一系列會盡量提供些實用的知識,讓您光是訂閱之後偶爾回來當工具書看都划算。

Ps. 為什麼要取工具包、撰寫初衷是什麼...? 這個可以在 Day8 找到答案喔 :)

前幾天分別介紹了使用物件陣列常見的方法,但是還少了一個沒有介紹,那就是今日的主角字串啦。

字串

大/小寫轉換

  1. 全部轉成大寫
var myStr = "heLLo WoRLd";
console.log(myStr.toUpperCase()); // HELLO WORLD
  1. 全部轉成小寫
var myStr = "heLLo WoRLd";
console.log(myStr.toLowerCase()); // hello world

把字串變成陣列

  1. split 中放入字串切割分組的關鍵詞,ex: ","
  2. 不放則是切割每個字元
  3. 第二個參數可以指定返回的陣列數量(可不加)
var myStr = "123abc".split("");
for(let i = 0; i < myStr.length; i++){
  console.log(myStr[i]); // 依序印出 1 2 3 a b c
}

第二個參數可指定數量,像是只返回 2 組,

var myStr = "123abc".split("", 2);
for(let i = 0; i < myStr.length; i++){
  console.log(myStr[i]); // 依序印出 1 2
}

還有一個使用情境是有一段好幾行的文章,但是你想切割出每一句,那就可以把切割的關鍵詞帶入 \n

替換字元

  1. 第一個參數為: 將被替換的字串
  2. 第二個參數為: 將替換的新字串
var myStr = "abc";
var newStr = myStr.replace("c", "zzz");
console.log(newStr); // abzzz

左邊搜尋文字也可以放 正則式,常用寫法為 /搜尋文字/g

  1. 參數 g 為搜尋所有相符字串,若沒有帶入此參數的話,則是替換第一個搜尋到的結果
  2. 參數 i 為檢查時忽略大小寫。

此範例為搜尋所有的 c,並將其替換為 QQ

var myStr = "a c b c d";
var newStr = myStr.replace(/c/g, "QQ");
console.log(newStr); // a QQ b QQ d

Q: 此範例一樣為搜尋所有的 c,並將其替換為 QQ,但是為何沒有成功呢?

var myStr = "acbcd";
var newStr = myStr.replace(/C/g, "QQ");
console.log(newStr); // acbcd

A: 因為搜尋字串把 c 打成大寫,解法為改成小寫或是加上參數 i

newStr = myStr.replace(/C/ig, "QQ");
console.log(newStr); // aQQbQQd

Ps. 正則式(regex)用法可沒這麼簡單,可以有更複雜的應用,詳情可以自己 Google XD

移除首尾空白

有時候使用者輸入的值,頭尾會不小心打到空白,如果想要移除的話,可以很簡單的使用這個方法,

var myStr = "   abc   ";
console.log(myStr.trim()); // abc

查找字串

可以檢查某字串是否包含在其中(有分大小寫),用法和 Array 的一樣,如果有找到就返回其 index,否則回傳 -1

var myStr = "Hello World";
console.log(myStr.indexOf("Hello")); // 0
console.log(myStr.indexOf("haha")); // -1
console.log(myStr.indexOf("World")); // 6

// 大小寫不同
console.log(myStr.indexOf("hello")); // -1

Since ES6

上方查找的方法會回傳其 index,但是也可以使用其他方法查找。

這個是 ES6 之後新增的,單純回傳有沒有找到,也就是回傳 truefalse
第二個參數可加上起始搜尋位置(可不加)。

var myStr = "Hello World";
console.log(myStr.includes("Hello")); // true
console.log(myStr.includes("QQ")); // false

取出指定範圍中的字串

  1. 第一個參數是起始 index,若是負數則從最後數來。
  2. 第二個參數是取出長度,不加則是取完剩下字元。

此範例欲取出 he,則在起始 index 填入 0,第二個長度參數填入 2

var myStr = "hello";
console.log(myStr.substr(0, 2)); // he

返回指定位置的字元

var myStr = "abc";
console.log(myStr.charAt(0)) // a

Since ES6

For of 取值

var mtStr = "hello";
for (let char of mtStr) {
  console.log(char);
}
// "h"
// "e"
// "l"
// "l"
// "o"

解構賦值

可以到 Day9 看更多說明。

var myStr = "abc";
var [q, w, e] = myStr;
console.log(q, w, e); // a, b, c

重複印出字串

var myStr = "abc";
console.log(myStr.repeat(3)); // "abcabcabc"

那今日的分享就到這,我們明天見/images/emoticon/emoticon51.gif


上一篇
Day12 工具包: 物件(3) - 解構賦值、縮寫、For...in
下一篇
Day14 舞DOM人生: 選擇器
系列文
從0.5開始的JavaScript30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言